import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { addNumberAction, subNumberAction } from '../store(拆分)/counter';

//使用react-redux
class About extends PureComponent {

  changeNumber(num, isAdd) {
    if (isAdd) {
      this.props.addNumber(num)
    } else {
      this.props.subNumber(num)
    }
  }

  render() { 
    const { counter, banners, recommends } = this.props
    return (
      <div>
        <h2>About: {counter}</h2>
        <div>
          <button onClick={() => this.changeNumber(6, true)}>+6</button>
          <button onClick={() => this.changeNumber(6, false)}>-6</button>
          <button onClick={() => this.changeNumber(18, true)}>+18</button>
          <button onClick={() => this.changeNumber(18, false)}>-18</button>
        </div>
        <div className='banner'>
          <h2>轮播图数据：</h2>
          <ul>
            {
              banners.map((item, index) => (<li key={index}>{item.title}</li>))
            }
          </ul>
        </div>
        <div className='recommend'>
          <h2>推荐数据：</h2>
          <ul>
            {
              recommends.map((item, index) => (<li key={index}>{item.title}</li>))
            }
          </ul>
        </div>
      </div>
     );
  }
}

//最终效果：<About {...this.props} {...obj}>，这样就可以在About组件中的props中取出store中的数据了
const mapStateToProps = (state) => ({
  counter: state.counter.counter,
  banners: state.home.banners,
  recommends: state.home.recommends
})

//最终效果：<About {...this.props} {...func}>, 将dispatch集中处理, 实现组件与store的解耦
const mapDispatchToProps = (dispatch) => ({
  addNumber: (num) => dispatch(addNumberAction(num)),
  subNumber: (num) => dispatch(subNumberAction(num))
})

/**
 * connect: 高阶函数, 接收两个函数作为参数, 返回一个新函数，这个新函数是一个高阶组件, 这个高阶组件再接收一个组件作为参数
 * 
 * @param mapStateToProps 获取store中的数据，映射到About组件中使用
 * @param mapDispatchToProps 封装dispatch方法, 映射到About组件中使用
 * @returns 返回值是一个函数（高阶组件）, 这个高阶组件接收一个组件作为参数
 */
export default connect(mapStateToProps, mapDispatchToProps)(About);